// 引入react和react—router
import React,{useReducer} from 'react'
import {Switch,Route,Redirect} from 'react-router-dom'

import  "./App.less"
import { DotLoading } from "antd-mobile"
import PrivateRoute from './utils/PrivateRoute';
import { initState, reducer } from './reducer/app';

const Index = React.lazy(() => import("./pages/Index/Index"))
const Register = React.lazy(() => import("./pages/Register/Register"))
const List = React.lazy(() => import("./pages/List/List"))
const Search = React.lazy(() => import("./pages/Search/Search"))
const Detail = React.lazy(() => import("./pages/Detail/Detail"))
const Login = React.lazy(() => import("./pages/Login/Login"))
const Coupon = React.lazy(() => import("./pages/Coupon/Coupon"))
const Shop = React.lazy(() => import("./pages/Shop/Shop"))
//创建上下文
export const MyContext = React.createContext()

const App = ()=> {
  const [state,dispatch]= useReducer(reducer,initState)
  return (
    <div className='app'>
      <MyContext.Provider value={{state,dispatch}}>
      <React.Suspense fallback={<DotLoading color='primary' />}>
      {/* Switch路由视图 */}
      <Switch>
        {/* Router路由规则 */}
        <Route path="/login" component={Login}></Route>
        <Route path="/register" component={Register}></Route>
        <PrivateRoute path="/index" component={Index}></PrivateRoute>
        <PrivateRoute path="/list/:id" component={List}></PrivateRoute>
        <Route path="/detail/:id/:type" component={Detail}></Route>
        <Route path="/search" component={Search}></Route>
        <Route path="/shop" component={Shop}></Route>
        <Route path="/coupon" component={Coupon}></Route>
        {/* 配置重定向 */}
        <Redirect to="/login"></Redirect>
      </Switch>
      </React.Suspense>
      </MyContext.Provider>
    </div>
  );
}
export default App;
